<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>   
    <link rel="shortcut icon"  href="images/网易云音乐.png" >
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="http/http.js"></script>
    <!-- <script src="http/index.js"></script> -->
    <!-- <script src="http/render.js"></script> -->

    
    <link rel="stylesheet" href="css/ajax-css.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/index2.css">
    <link rel="stylesheet" href="css/index2-1.css">
    <link rel="stylesheet" href="css/index3.css">
    <link rel="stylesheet" href="css/index4.css">
    <link rel="stylesheet" href="css/fix.css">
</head>

<body>
    <!-- title开始 -->
    <div class="head-top">
        <div class="nav-top">
            <div class="wrap">
                <div class="logo">
                    <img src="images/网易云音乐.png" alt="">
                    <p class="icon-a" style="color: #fff;font-size: 22px;height: 70px;">网易云音乐</p>
                </div>
                <ul class="head-title">
                    <li class="faxian">
                        <span>
                            <a href="" class="z-slt">
                                <em style="font-style: 12px;">发现音乐</em>
                                <sub class="cor">&nbsp;</sub>                               
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <em style="font-style: 12px;">我的音乐</em>
                                <sub class="cor">&nbsp;</sub>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <em style="font-style: 12px;">朋友</em>
                                <sub class="cor">&nbsp;</sub>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <em style="font-style: 12px;">商城</em>
                                <sub class="cor">&nbsp;</sub>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <em style="font-style: 12px;">音乐人</em>
                                <sub class="cor">&nbsp;</sub>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <em style="font-style: 12px;">下载客户端</em>
                                <sup class="hot">&nbsp;</sup>
                            </a>
                        </span>
                    </li>
                </ul>
            
                <div class="sousuo">

                    <div class="srchbg">
                        <img src="images/search.png" alt="">
                        <input class="kuang" type="" placeholder="音乐/视频/电台/用户">
                        
                    </div>
                

                    <p class="m-topvd">创作者中心</p>


                    <div class="touxiang">
                        <img src="images/用户中心_f.png" alt="">
                    </div>
                </div>
            </div>

        </div>
        <div class="nav-foot">           
            <div class="xia f-pr">           
                <ul class="nav">
                    <li><a class="gedab" style="margin-top: 7px;font-size: 12px;">推荐</a></li>
                    <li><a style="margin-top: 7px;font-size: 12px;">排行榜</a></li>
                    <li><a class="f-pr" style="margin-top: 7px;font-size: 12px;">歌单
                        <span class="f-pa f-r-white-icon" style="display:inline-block;color: aliceblue;">&reg;</span>
                    </a></li>
                    <li><a style="margin-top: 7px;font-size: 12px;">主播电台</a></li>
                    <li><a style="margin-top: 7px;font-size: 12px;">歌手</a></li>
                    <li><a style="margin-top: 7px;font-size: 12px;">新碟上架</a></li>
                </ul>
            </div>          
        </div>
    </div>
    <!-- title结束 -->
    <!-- 轮播图开始 -->
    <div class="lunbo">
        <div class="nav-lunbo">
            <div class="content">
                <div id="list">
                    <!-- <img src="images/01.jpg" alt="">
                    <img src="images/02.jpg" alt="">
                    <img src="images/03.jpg" alt="">
                    <img src="images/04.jpg" alt="">
                    <img src="images/05.jpg" alt="">
                    <img src="images/06.jpg" alt="">
                    <img src="images/07.jpg" alt="">
                    <img src="images/08.jpg" alt="">
                    <img src="images/09.jpg" alt="">
                    <img src="images/10.jpg" alt=""> -->
                </div>
                
                <div id="btns">
                    <span class="current"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                
            </div>
            

            

            <div class="kehuduan">
                <img style="width:253px;height: 290px;margin-right: -36px;" src="images/客户端.png" alt="">
            </div>
        </div>
        <div id="lb-bg">
            <!-- <img src="images/001.jpg" alt="">
            <img src="images/002.jpg" alt="">
            <img src="images/003.jpg" alt="">
            <img src="images/004.jpg" alt="">
            <img src="images/005.jpg" alt="">
            <img src="images/006.jpg" alt="">
            <img src="images/007.jpg" alt="">
            <img src="images/008.jpg" alt="">
            <img src="images/009.jpg" alt="">
            <img src="images/010.jpg" alt=""> -->
        </div>
        <button id="prev"></button>
        <button id="next"></button>
    </div>

    <script>

        var index = 0;
        $("#next").click(function () {
            index++;
            if (index > 9) {
                index = 0;
            }
            animate(index);
        })
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 9;
            }
            console.log(index)
            animate(index);
        })

        // 3.焦点随左右按钮变化
        function animate(index) {
                $("#lb-bg img").eq(index).fadeIn(3000).siblings().fadeOut(3000);
                $("#list img").eq(index).fadeIn(3000).siblings().fadeOut(3000);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            }
            // 4.点击按钮,让对应的图片出现
            $('#btns span').click(function () {
            // 重置下标值
            index = $(this).index();
            animate(index)
            })
            function animate(index) {
                $("#lb-bg img").eq(index).fadeIn().siblings().fadeOut();
                $("#list img").eq(index).fadeIn().siblings().fadeOut();
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            }
            //5.自动播放
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 3000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        
    </script>


<!-- ajax轮播开始 -->

<!-- ajax轮播图片开始 -->
<script>
    var listUrl = "http://192.168.4.18:3000/banner/"
        ajax({url:listUrl,method:"get",success:res=>{
            // console.log(res)
            var arr = res.banners
            // console.log(arr)
            arr.forEach((item,index)=>{
                
            var htmlItem = `
                         
                <img src ="${item.imageUrl}" alt="">
            
                `
                $("#list").append(htmlItem)
        })
            
        }})
</script>
<!-- ajax轮播图片结束 -->

<!-- ajax轮播背景开始 -->
<script>
    var listUrl = "http://192.168.4.18:3000/banner/"
        ajax({url:listUrl,method:"get",success:res=>{
            // console.log(res)
            var arr = res.banners
            // console.log(arr)
            arr.forEach((item,index)=>{
                
            var htmlItem = `
                         
                <img class="filter" src ="${item.imageUrl}" alt="">
            
                `
                $("#lb-bg").append(htmlItem)
        })
            
        }})
</script>
<!-- ajax轮播背景结束 -->

<!-- ajax轮播结束 -->
    <!-- 轮播图结束 -->
    <div class="nav-list-container" style="border-bottom: 1px solid rgb(211,211,211);">
        <div class="nav-center">
            <div class="nav-list-left">
                <div class="nav-list-one">
                    <div class="remen">
                        <div class="remen-left">
                            <img class="red-circle" src="images/红圆圈.png" alt="">
                            <p class="tuijian" style="display: inline-block;font-size: 20px;">热门推荐</p>
                            <span class="recommand" style="word-spacing: 10px;font-size:12px;display: inline-block;color: rgb(102, 102, 102);">
                                <i>华语</i>
                                 | 
                                <i>流行</i>
                                 | 
                                <i>摇滚</i>
                                 | 
                                <i>民谣</i>
                                 | 
                                <i>电子</i>
                                
                            </span>
                        </div>
                        <div class="more1" style="display: inline-block;">
                            <span style="font-size:12px;color: rgb(102, 102, 102);">更多</span>
                            <img class="red-arrow" src="images/红箭头.png" alt="">
                        </div>
                        <div class="redline"></div>
                    </div>
                    <div class="rmtj">
                        <!-- <div class="rmyj-one" style="width: 139px;height: 200px;">
                            <img src="images/忧伤.png" alt="">
                            <p>万物皆有裂痕,生活的答案不只是完美</p>
                        </div>
                        <div class="rmyj-ywo" style="width: 139px;height: 200px;">
                            <img src="images/私人.png" alt="">
                            <p>中文说唱|我想呼风唤雨用奇妙旋律</p>
                        </div>
                        <div class="rmyj-three" style="width: 139px;height: 200px;">
                            <img src="images/后摇.png" alt="">
                            <p>评论过万的英文歌与潜力股</p>
                        </div>
                        <div class="rmyj-four" style="width: 139px;height: 200px;">
                            <img src="images/苦艾.png" alt="">
                            <P>圣诞有你 梦幻惊喜</P>
                        </div> -->
                    </div>
                </div>
<!-- ajax华语部分开始 -->
                <script>
                    var listUrl = "http://192.168.4.18:3000/top/playlist?cat=%E5%8D%8E%E8%AF%AD"
                    ajax({url:listUrl,method:"get",success:res=>{
                        // console.log(res)
                        var arr = res.playlists.slice(0,4)
                        // console.log(arr)
                        arr.forEach((item,index)=>{
                            var belong = item.creator.nickname;
                            console.log(handleStr(belong))

                            var head = item.name;
                            console.log(handleStr(head))

                            function handleStr(value){
                                if(value.length>7){
                                    return value.slice(0,8)+"..."
                                }
                                return value;

                            }
                            
                            function handleStr(value){
                                if(value.length>7){
                                    return value.slice(0,8)+"..."
                                }
                                return value;

                            }
                        var htmlItem = `
                            <div class =rmtj-cover> 
                                <img src ="${item.coverImgUrl}" alt="">
                                <div class="txt-bottom">
                                    <p>${handleStr(head)}</p>
                                    <p>by${handleStr(belong)}</p>
                                </div>
                            </div>
                        
                            `
                            $(".rmtj").append(htmlItem)
                    })
                        
                    }})
                </script>
<!-- ajax华语部分结束 -->


                <div class="nav-list-two">
                    <div class="gexing">
                        <div class="gexing-left">
                            <img class="red-circle2" src="images/红圆圈.png" alt="">
                            <p class="huatuijian" style="display: inline-block;font-size: 20px;">个性化推荐</p>               
                        </div>
                        
                        <div class="redline2"></div>
                    </div>
                    <div class="gxhtj" style="display: flex;width: 730px;margin: 25px auto;justify-content: space-around;align-items: center;">
                        <div class="gxh gxh-one" style="width: 139px;height: 200px;">
                            <img src="images/每日.png" alt="">
                            <p style="font-size: 14px;">每日歌曲推荐</p>
                            <p style="font-size: 12px;color: rgb(102, 102, 102);">根据你的口味生成,<br>每天6:00更新</p>
                        </div>
                        <div class="gxh ghh-two" style="width: 139px;height: 200px;">
                            <img src="images/私人.png" alt="">
                            <p style="font-size: 14px;">评论过万的英文歌与潜力股</p>
                            <p style="font-size: 12px;color: rgb(102, 102, 102);">热门推荐</p>
                        </div>
                        <div class="gxh gxh-three" style="width: 139px;height: 200px;">
                            <img src="images/别爱.png" alt="">
                            <p style="font-size: 14px;">那些评论过万的日文歌更新中</p>
                            <p style="font-size: 12px;color: rgb(102, 102, 102);">热门推荐</p>
                        </div>
                        <div class="gxh gxh-four" style="width: 139px;height: 200px;">
                            <img src="images/那年.png" alt="">
                            <P style="font-size: 14px;">我的江南有雨 落不到你的续长安❤</P>
                            <p style="font-size: 12px;color: rgb(102, 102, 102);">热门推荐</p>
                        </div>
                    </div>
                </div>
                <div class="nav-list-three">
                    <div class="xindieshangjia">
                        <div class="xdsj-left">
                            <img class="red-circle3" src="images/红圆圈.png" alt="">
                            <p class="xindie" style="display: inline-block;font-size: 20px;">新碟上架</p>
                        </div>
                        <div class="more3" style="display: inline-block;">
                            <span style="font-size:12px;color: rgb(102, 102, 102);">更多</span>
                            <img class="red-arrow3" src="images/红箭头.png" alt="">
                        </div>
                        <div class="redline3"></div>
                    </div>
                    <div class="xdsj" style="width: 689px;margin: 25px auto;background-color: rgb(245,245,245);border: 1px solid rgb(211,211,211);">
                        <div class="content9">
                            <div id="list9">
                                <div class="div1 xdsj-bg" style="width:620px;margin:0 auto;height: 185px;display: flex;justify-content: space-around;align-items: center;">
                                    <div class="xdsj-one" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/AZ.png" alt=""></a>
                                        <p style="font-size: 14px;">AZORAland·我是</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">尤长靖</p>
                                    </div>
                                    <div class="xdsj-ywo" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/致明日.png" alt=""></a>
                                        <p style="font-size: 14px;">致明日的舞</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">陈奕迅</p>
                                    </div>
                                    <div class="xdsj-three" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/RE.png" alt=""></a>
                                        <p style="font-size: 14px;">REVISIT</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">张国荣</p>
                                    </div>
                                    <div class="xdsj-four" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/LO.png" alt=""></a>
                                        <P style="font-size: 14px;">Lonely</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">Justin Bieber</P>
                                    </div>
                                    <div class="xdsj-five" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/彩卷.png" alt=""></a>
                                        <P style="font-size: 14px;">彩券</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">薛之谦</P>
                                    </div>
                                </div>
                                <div class="div2 xdsj-bg" style="width:620px;margin:0 auto;height: 185px;display: flex;justify-content: space-around;align-items: center;">
                                    <div class="xdsj-one" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/AZ.png" alt=""></a>
                                        <p style="font-size: 14px;">AZORAland·我是</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">尤长靖</p>
                                    </div>
                                    <div class="xdsj-ywo" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/致明日.png" alt=""></a>
                                        <p style="font-size: 14px;">致明日的舞</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">陈奕迅</p>
                                    </div>
                                    <div class="xdsj-three" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/RE.png" alt=""></a>
                                        <p style="font-size: 14px;">REVISIT</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">张国荣</p>
                                    </div>
                                    <div class="xdsj-four" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/LO.png" alt=""></a>
                                        <P style="font-size: 14px;">Lonely</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">Justin Bieber</P>
                                    </div>
                                    <div class="xdsj-five" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/彩卷.png" alt=""></a>
                                        <P style="font-size: 14px;">彩券</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">薛之谦</P>
                                    </div>
                                </div>
                                <div class="div3 xdsj-bg" style="width:620px;margin:0 auto;height: 185px;display: flex;justify-content: space-around;align-items: center;">
                                    <div class="xdsj-one" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/AZ.png" alt=""></a>
                                        <p style="font-size: 14px;">AZORAland·我是</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">尤长靖</p>
                                    </div>
                                    <div class="xdsj-ywo" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/致明日.png" alt=""></a>
                                        <p style="font-size: 14px;">致明日的舞</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">陈奕迅</p>
                                    </div>
                                    <div class="xdsj-three" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/RE.png" alt=""></a>
                                        <p style="font-size: 14px;">REVISIT</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">张国荣</p>
                                    </div>
                                    <div class="xdsj-four" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/LO.png" alt=""></a>
                                        <P style="font-size: 14px;">Lonely</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">Justin Bieber</P>
                                    </div>
                                    <div class="xdsj-five" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/彩卷.png" alt=""></a>
                                        <P style="font-size: 14px;">彩券</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">薛之谦</P>
                                    </div>
                                </div>
                                <div class="div4 xdsj-bg" style="width:620px;margin:0 auto;height: 185px;display: flex;justify-content: space-around;align-items: center;">
                                    <div class="xdsj-one" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/AZ.png" alt=""></a>
                                        <p style="font-size: 14px;">AZORAland·我是</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">尤长靖</p>
                                    </div>
                                    <div class="xdsj-ywo" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/致明日.png" alt=""></a>
                                        <p style="font-size: 14px;">致明日的舞</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">陈奕迅</p>
                                    </div>
                                    <div class="xdsj-three" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/RE.png" alt=""></a>
                                        <p style="font-size: 14px;">REVISIT</p>
                                        <p style="font-size: 12px;color: rgb(102, 102, 102);">张国荣</p>
                                    </div>
                                    <div class="xdsj-four" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/LO.png" alt=""></a>
                                        <P style="font-size: 14px;">Lonely</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">Justin Bieber</P>
                                    </div>
                                    <div class="xdsj-five" style="width: 118px;height: 140px;">
                                        <a href=""><img src="images/彩卷.png" alt=""></a>
                                        <P style="font-size: 14px;">彩券</P>
                                        <P style="font-size: 12px;color: rgb(102, 102, 102);">薛之谦</P>
                                    </div>
                                </div>
                            </div>
                            
                           
                        </div>
                        <button id="prev9"></button>
                            <button id="next9"></button>
                        <script>
                            $(function () {
                                var timer;
                                var index = 0;
                                $("#next9").click(function () {
                    
                                    if (!$("#list9").is(":animated")) {
                                        index++;
                                        if (index > 1) {
                                            index = 0;
                                        }
                                        showBtn();
                                        animate(-620);
                                    }
                                })
                                $("#prev9").click(function () {
                                    if (!$("#list9").is(":animated")) {
                                        index--;
                                        if (index < 0) {
                                            index = 1;
                                        }
                                        showBtn();
                                        animate(620)
                                    }
                                })
                                function animate(offset) {
                                    var newLeft = $("#list9").position().left + offset
                                    $("#list9").animate({ left: newLeft + "px" }, 1200, function () {
                                        if (newLeft < -1240) {
                                            $("#list9").css({ left: "-620px" })
                                        }
                                        if (newLeft > -620) {
                                            $("#list9").css({ left: "-1240px" })
                                        }
                                    })
                                }
                                function showBtn() {
                                }
                            })
                        </script>
                        
                    </div>

                </div>
                <div class="nav-list-four">
                    <div class="bd">
                        <div class="bd-left">
                            <img class="red-circle4" src="images/红圆圈.png" alt="">
                            <p class="bangdan" style="display: inline-block;font-size: 20px;">榜单</p>
                        </div>
                        <div class="more4" style="display: inline-block;">
                            <span style="font-size:12px;color: rgb(102, 102, 102);">更多</span>
                            <img class="red-arrow4" src="images/红箭头.png" alt="">
                        </div>
                        <div class="redline4"></div>
                    </div>

                    <div class="n-bilst" id="top-flag">
                        <dl class="blk ">
                        <dt class="top">
                            <div class="cver u-cover u-cover-4">
                                <img class="j-img" src="images/飙升.png">
                                <a href="" class="msk" ></a>
                            </div>
                            <div class="tit">
                                <a><h3 class="f-fs1 f-thide">云音乐飙升榜</h3></a>
                                <div class="btn">
                                    <a class="s-bg s-bg-9 f-tdn" hidefocus="true" data-res-type="13" data-res-id="19723756" data-res-action="play" data-res-from="31" data-res-data="19723756">播放</a>
                                    <a hidefocus="true" class="s-bg s-bg-10 f-tdn subscribe-flag " data-plid="19723756" >收藏</a>
                                </div>
                            </div>
                        </dt>
                        <dd style="font-size: 12px;">
                            <ol>
                                <li  class="">
                                    <span class="no no-top">1</span>
                                    <div class="ho">
                                    <a class="nm s-fc0 f-thide">天外来物</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>
                                    
                                </li>
                                <li  class="">
                                    <span class="no no-top">2</span>
                                    <div class="ho">
                                    <a class="nm s-fc0 f-thide">在哪里都很好</a>
                                    <span class="jianju">
                                        <a href="#">
                                            <img src="images/暂停4.png">
                                        </a>
                                        <a href="#">
                                            <img src="images/加4.png">
                                        </a>
                                        <a href="#">
                                            <img src="images/收藏夹4.png">
                                        </a>
                                    </span>
                                </div>
                        
                                </li>
                                <li  class="">
                                    <span class="no no-top">3</span>
                                    <div class="ho">
                                    <a class="nm s-fc0 f-thide">启</a>
                                    <span class="jianju">
                                        <a href="#">
                                            <img src="images/暂停 (4).png">
                                        </a>
                                        <a href="#">
                                            <img src="images/加.png">
                                        </a>
                                        <a href="#">
                                            <img src="images/收藏夹 (1).png">
                                        </a>
                                    </span>
                                </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">4</span>
                                <div class="ho">
                                <a class="nm s-fc0 f-thide" >送一朵愧疚的花</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹4.png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">5</span>
                                <div class="ho">
                                <a  class="nm s-fc0 f-thide" >再说句晚安</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停 (4).png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹 (1).png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">6</span>
                                <div class="ho">
                                <a  class="nm s-fc0 f-thide" >什么跟什么有什么关系</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹4.png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">7</span>
                                <div class="ho">
                                <a  class="nm s-fc0 f-thide">资深庸才</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停 (4).png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹 (1).png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li >
                                <span class="no">8</span>
                                <div class="ho">
                                <a class="nm s-fc0 f-thide" >Things I do for love</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹4.png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">9</span>
                                <div class="ho">
                                <a  class="nm s-fc0 f-thide">SO BAD</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停 (4).png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹 (1).png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                                <li  class="">
                                <span class="no">10</span>
                                <div class="ho">
                                <a class="nm s-fc0 f-thide">Hometown</a>
                                <span class="jianju">
                                    <a href="#">
                                        <img src="images/暂停4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/加4.png">
                                    </a>
                                    <a href="#">
                                        <img src="images/收藏夹4.png">
                                    </a>
                                </span>
                            </div>
                        
                                </li>
                            </ol>

                            <div class="more"><a class="s-fc0">查看全部&gt;</a></div>
                        </dd>
                        </dl>
                        <dl class="blk ">
                            <dt class="top">
                                <div class="cver u-cover u-cover-4">
                                    <img class="j-img" src="images/新歌.png">
                                    <a class="msk"></a>
                                </div>
                                <div class="tit">
                                    <a ><h3 class="f-fs1 f-thide">云音乐新歌榜</h3></a>
                                    <div class="btn">
                                    <a class="s-bg s-bg-9 f-tdn" hidefocus="true"  data-res-type="13" data-res-id="3779629" data-res-action="play" data-res-from="31" data-res-data="3779629">播放</a>
                                    <a hidefocus="true" class="s-bg s-bg-10 f-tdn subscribe-flag " data-plid="3779629" title="收藏">收藏</a>
                                    </div>
                                </div>
                            </dt>
                            <dd style="font-size: 12px;">
                                <ol>
                                    <li  class="">
                                        <span class="no no-top">1</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide" >如果当时2020</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>

                                    </li>
                                    <li  class="">
                                        <span class="no no-top">2</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">经济舱 (Live)</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹4.png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no no-top">3</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">我很好（吉他版）</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                        <li  class="">
                                        <span class="no">4</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">经济舱</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹4.png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">5</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">会不会（正式版）</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">6</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">一花一剑</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹4.png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">7</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">嘻哈帝国 (Empire)</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">8</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">I Need a Girl，Pt.3</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹4.png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">9</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">彩券</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停 (4).png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹 (1).png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                    <li  class="">
                                        <span class="no">10</span>
                                        <div class="ho">
                                        <a class="nm s-fc0 f-thide">执迷不悟 (DJ版)</a>
                                        <span class="jianju">
                                            <a href="#">
                                                <img src="images/暂停4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/加4.png">
                                            </a>
                                            <a href="#">
                                                <img src="images/收藏夹4.png">
                                            </a>
                                        </span>
                                    </div>
                            
                                    </li>
                                </ol>
                                <div class="more"><a class="s-fc0">查看全部&gt;</a></div>
                            </dd>
                        </dl>
                        <dl class="blk blk-1">
                            <dt class="top">
                                <div class="cver u-cover u-cover-4">
                                    <img class="j-img" src="images/原创.png">
                                    <a href="" class="msk"></a>
                                </div>
                                <div class="tit">
                                    <a><h3 class="f-fs1 f-thide">网易原创歌曲榜</h3></a>
                                    <div class="btn">
                                        <a class="s-bg s-bg-9 f-tdn" hidefocus="true"  data-res-type="13" data-res-id="2884035" data-res-action="play" data-res-from="31" data-res-data="2884035">播放</a>
                                        <a hidefocus="true" class="s-bg s-bg-10 f-tdn subscribe-flag " data-plid="2884035">收藏</a>
                                    </div>
                                </div>
                            </dt>
                        <dd style="font-size: 12px;">
                        <ol>
                        <li  class="">
                            <span class="no no-top">1</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">Overlove</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停 (4).png">
                                </a>
                                <a href="#">
                                    <img src="images/加.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹 (1).png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no no-top">2</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">故城千寻</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停4.png">
                                </a>
                                <a href="#">
                                    <img src="images/加4.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹4.png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no no-top">3</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">西施江南</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停 (4).png">
                                </a>
                                <a href="#">
                                    <img src="images/加.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹 (1).png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no">4</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">乌托邦</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停4.png">
                                </a>
                                <a href="#">
                                    <img src="images/加4.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹4.png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li  class="">
                            <span class="no">5</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">最难写是结尾</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停 (4).png">
                                </a>
                                <a href="#">
                                    <img src="images/加.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹 (1).png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li  class="">
                            <span class="no">6</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">一分一寸</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停4.png">
                                </a>
                                <a href="#">
                                    <img src="images/加4.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹4.png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no">7</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">三个字</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停 (4).png">
                                </a>
                                <a href="#">
                                    <img src="images/加.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹 (1).png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no no-top">8</span>

                            <div class="ho">
                            <a class="nm s-fc0 f-thide">Movie</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停4.png">
                                </a>
                                <a href="#">
                                    <img src="images/加4.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹4.png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no">9</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide" >莫欺少年穷</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停 (4).png">
                                </a>
                                <a href="#">
                                    <img src="images/加.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹 (1).png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        <li >
                            <span class="no">10</span>
                            <div class="ho">
                            <a class="nm s-fc0 f-thide">给你十万安全感</a>
                            <span class="jianju">
                                <a href="#">
                                    <img src="images/暂停4.png">
                                </a>
                                <a href="#">
                                    <img src="images/加4.png">
                                </a>
                                <a href="#">
                                    <img src="images/收藏夹4.png">
                                </a>
                            </span>
                        </div>
                
                        </li>
                        </ol>
                            <div class="more"><a class="s-fc0">查看全部&gt;</a></div>
                        </dd>
                        </dl>
                    </div>

                </div>
            </div>
            <div class="nav-list-right">
                <div class="person">
                    <div class="user-d s-bg-5 n-myinfo">
                        <div class="user-top">
                            <div class="user-top-left">
                                <img class="user-tou" src="images/user-right.png" alt="">
                                
                            </div>
                            <div class="user-top-right">
                                <img class="user-name" src="images/user-name.png" alt="">
                                <a class="btn-wrap u-btn2 u-btn2-2">
                                    <i>签到</i>
                                </a>

                            </div>
                            
                        </div>
                        <div class="user-foot" style="margin-top: 105px;">
                            <ul class="dny s-fc3 f-cb">
                                <li class="fst">
                                    <a href="/user/event?id=628161025">
                                        <strong id="event_count">0</strong>
                                        <span>动态</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/user/follows?id=628161025">
                                        <strong id="follow_count">1</strong>
                                        <span>关注</span>
                                    </a>
                                </li>
                                <li class="lst">
                                    <a href="/user/fans?id=628161025">
                                        <strong id="fan_count">1</strong>
                                        <span>粉丝</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="singer">
                    <div class="singer-center">
                        <div class="singer-top">
                            <span class="singer-top-left" style="font-size: 14px;font-weight: bold; color: #333;">
                                入驻歌手
                            </span>
                            <span class="singer-top-right" style="float: right;margin-top: 5px; font-size: 12px; color: #666666;">
                                查看全部&gt;
                            </span>
                        </div>
                        <div class="singer-request">
                            <div class=" singer-list">
                                <div class="singer-pic singer1">
                                    <img src="images/阿妹.png" alt="">
                                    <div class="text-right">
                                        <p class="right-one">张惠妹aMEI</p>
                                        <p class="right-tuo">台湾歌手张惠妹</p>
                                    </div>
                                </div>
                                <div class="singer-pic singer2">
                                    <img src="images/fine.png" alt="">
                                    <div class="text-right">
                                        <p class="right-one">Fine乐团</p>
                                        <p class="right-tuo">独立音乐人</p>
                                    </div>
                                </div>
                                <div class="singer-pic singer3">
                                    <img src="images/万晓利.png" alt="">
                                    <div class="text-right">
                                        <p class="right-one">万晓利</p>
                                        <p class="right-tuo">民谣歌手</p>
                                    </div>
                                </div>
                                <div class="singer-pic singer4">
                                    <img src="images/赵雷.png" alt="">
                                    <div class="text-right">
                                        <p class="right-one">音乐人赵雷</p>
                                        <p class="right-tuo">民谣歌手</p>
                                    </div>
                                </div>
                                <div class=" singer-pic singer5">
                                    <img src="images/王三溥.png" alt="">
                                    <div class="text-right">
                                        <p class="right-one">王三溥</p>
                                        <p class="right-tuo">音乐人</p>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="singer6">
                                    <a href="" class="u-btn2-1">
                                        <i>申请成为网易云人</i>
                                    </a>
                            </div>
                        </div>                       
                    </div>

                    
                        <div class="anchor-center">
                            <div class="anchor-top">
                                <span class="anchor-top-left" style="font-size: 12px;font-weight: bold; color: #333;">
                                    热门主播
                                </span>                          
                            </div>
                            <div class=" anchor-list">
                                <div class="anchor-pic anchor1">
                                    <img src="images/陈立.png" alt="">
                                    <div class="text-right2">
                                        <p class="right-one2">陈立</p>
                                        <p class="right-tuo">心理学家,美食家陈立教授</p>
                                    </div>
                                </div>
                                <div class="anchor-pic anchor2">
                                    <img src="images/艳秋.png" alt="">
                                    <div class="text-right2">
                                        <p class="right-one2">DJ艳秋</p>
                                        <p class="right-tuo">著名音乐主持人</p>
                                    </div>
                                </div>
                                <div class="anchor-pic anchor3">
                                    <img src="images/国家.png" alt="">
                                    <div class="text-right2">
                                        <p class="right-one2">国家大剧院古典音乐频道</p>
                                        <p class="right-tuo">国家大剧院古典音乐官方</p>
                                    </div>
                                </div>
                                <div class="anchor-pic anchor4">
                                    <img src="images/谢谢收听.png" alt="">
                                    <div class="text-right2">
                                        <p class="right-one2">谢谢收听</p>
                                        <p class="right-tuo">南京电台主持人王馨</p>
                                    </div>
                                </div>
                                <div class="anchor-pic anchor5">
                                    <img src="images/晓苏.png" alt="">
                                    <div class="text-right2">
                                        <p class="right-one2">DJ晓苏</p>
                                        <p class="right-tuo">独立DJ,CRI环球旅游广播</p>
                                    </div>
                                </div>
                                
                            </div>
    
                        </div>
                    
                </div>
                
            </div>
        </div>
    </div>
    <!-- container部分结束 -->
<div class="foot" style="width: 100%;background-color:rgb(242,242,242);">
    <div class="nav-footer">
        <div class="footer-left">
            <p>服务条款&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;隐私政策&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;儿童隐私政策&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;版权投诉指引&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;意见反馈&nbsp;&nbsp;&nbsp;|</p>
            <p>网易公司版权所有&copy;1997-2020 &nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：浙网文[2018]3506-263号</p>
            <p>违法和不良信息举报电话：0571-89853516 &nbsp;&nbsp;&nbsp;举报邮箱：ncm5990@163.com</p>
            <p>粤B2-20090191-18 &nbsp;&nbsp;&nbsp;工业和信息化部备案管理系统网站&nbsp;&nbsp;&nbsp;浙公网安备33010902002564号</p>
        </div>
        <div class="footer-right">
            <ul class="f-fr">
                <li class="unit">
                    <img class="icon" src="images/AM.png"></img>               
                </li>
                <li class="unit">
                    <img class="icon" src="images/独立.png"></img>               
                </li>
                <li class="unit">
                    <img class="icon" src="images/视频.png"></img>                
                </li>
                <li class="unit">
                    <img class="icon" src="images/赞赏.png"></img>                
                </li>
                <li class="unit">
                    <img class="icon" src="images/用户.png"></img>               
                </li>
            </ul>
        </div>

    </div>
</div>

<!-- top部分 -->
<a title="回到顶部" class="m-back" href="#" id="g_backtop" hidefocus="true" >
    回到顶部
</a>
<script>
    $(window).scroll(function(){
        var scrollTop =  $(window).scrollTop();
        // 200时候完全显示
        var opacity = scrollTop/300;
        if(opacity>1){
            opacity = 1
        }
        console.log(opacity)
        $(".m-back").css({opacity:opacity})
    })
</script>
<!-- top部分结束 -->
<!-- 底部fix部分 -->
<!-- <div class="g-btmbar">
    <div class="m-playbar m-playbar-lock" style="top: -53px; visibility: visible;" id="auto-id-pBhw32hPqFiVwPpw">
        <div class="updn">
            <div class="left f-fl"><a href="javascript:;" class="btn" hidefocus="true" data-action="lock"></a></div>
            <div class="right f-fl"></div>
        </div>
        <div class="bg"></div>
        <div class="hand" title="展开播放条"></div>
        <div class="wrap" id="g_player" style="margin-left: -498.5px;">
            <div class="btns">
                <a href="javascript:;" hidefocus="true" data-action="prev" class="prv" title="上一首(ctrl+←)">上一首</a>
                <a href="javascript:;" hidefocus="true" data-action="play" class="ply j-flag" title="播放/暂停(p)">播放/暂停</a>
                <a href="javascript:;" hidefocus="true" data-action="next" class="nxt" title="下一首(ctrl+→)">下一首</a>
            </div>
            <div class="head j-flag"><img src="images/default_album.jpg"><a href="javascript:;" hidefocus="true" class="mask"></a></div>
            <div class="play">
                <div class="j-flag words"></div>
                <div class="m-pbar" data-action="noop">
                    <div class="barbg j-flag" id="auto-id-87AkgLxDgLJlUazX">
                        <div class="rdy" style="width:0%;"></div>
                        <div class="cur" style="width: 0%;"><span class="btn f-tdn f-alpha" id="auto-id-sDXPplqrEMLX9SMl"><i></i></span></div>
                    </div>
                    <span class="j-flag time"><em>00:00</em> / 00:00</span>
                </div>
            </div>
            <div class="oper f-fl">
                <a href="javascript:;" hidefocus="true" data-action="like" class="icn icn-add j-flag" title="收藏">收藏</a>
                <a href="javascript:;" hidefocus="true" data-action="share" class="icn icn-share" title="分享">分享</a>
            </div>
            <div class="ctrl f-fl f-pr j-flag">
                <div class="m-vol" style="visibility:hidden;" id="auto-id-0HuTfXiJJeAAJZMz">
                    <div class="barbg"></div>
                    <div class="vbg j-t" id="auto-id-hhasJOSoGZv6OkQn">
                        <div class="curr j-t" style="height: 46.5px;"></div>
                        <span class="btn f-alpha j-t" style="top: 40.5px;"></span>
                    </div>
                </div>
                <a href="javascript:;" hidefocus="true" data-action="volume" class="icn icn-vol"></a>
                <a href="javascript:;" hidefocus="true" data-action="mode" class="icn icn-loop" title="循环"></a>
                <span class="add f-pr">
                    <span class="tip" style="display:none;">已添加到播放列表</span>
                    <a href="javascript:;" title="播放列表" hidefocus="true" data-action="panel" class="icn icn-list s-fc3">0</a>
                </span>
                <div class="tip tip-1" style="display:none;">
                    循环
                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- 底部fix部分结束 -->
</body>

</html>
